<template>
  <div class="container">
    <el-form :inline="true" :model="formInline">
      <el-form-item label="审核状态">
        <el-select v-model="formInline.auditState" placeholder="请选择审核状态">
          <el-option :label="item.name" :value="item.value" v-for="item in auditStateList" :key="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">搜索</el-button>
        <el-button type="danger" @click="delFn" :disabled="idList.length==0">批量删除</el-button>
        <el-button @click="init">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="tableData.records" :stripe="true" border @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column type="index" />
      <el-table-column prop="city" label="城市" align="center" min-width="200" />
      <el-table-column prop="commentNum" label="评论数量" align="center" min-width="100" />
      <el-table-column prop="clickPraiseNum" label="点赞数量" align="center" min-width="150" />
      <el-table-column prop="content" label="内容" align="center" min-width="300" />
      <el-table-column prop="street" label="日记照片" align="center" min-width="100">
        <template #default="scope">
          <el-button type="primary" text @click="seeDetail(scope.row)" :disabled="scope.row.imgs.length==0">详情</el-button>
        </template>
      </el-table-column>
      <el-table-column label="审核状态" align="center" min-width="100">
        <template #default="scope">
          <el-tag v-if="scope.row.auditState=='01'">{{auditState_format(scope.row.auditState)}}</el-tag>
          <el-tag type="success" v-else-if="scope.row.auditState=='02'">{{auditState_format(scope.row.auditState)}}</el-tag>
          <el-tag type="danger" v-else>{{auditState_format(scope.row.auditState)}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="auditTime" label="审核时间" align="center" min-width="180">
        <template #default="scope">
          {{proxy.$utils.dateTimeFormateFn(scope.row.auditTime,"all")}}
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" min-width="180">
        <template #default="scope">
          {{proxy.$utils.dateTimeFormateFn(scope.row.createTime,"all")}}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" fixed="right" width="180">
        <template #default="scope">
          <el-button type="primary" :disabled="scope.row.auditState!='01'" text @click="proxy.$refs.approvalCom.open(scope.row.id);">审核</el-button>
          <el-button type="primary" text @click="handClick(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-if="tableData['total']" :total="tableData['total']" v-model:page="formInline.pageNum" v-model:limit="formInline.pageSize" @pagination="getInfo" />

    <el-dialog v-model="dialogVisible" title="日记照片" width="500" :before-close="handleClose">
      <uploadImage v-model="info.imgs" readonly="1" valType="arr"></uploadImage>
    </el-dialog>

    <approval ref="approvalCom" @fatherMethods="getInfo" request="companyDiaryControllerAudit"></approval>
  </div>
</template>

<script setup lang="ts">
import approval from "@/views/freeLobbyManage/components/approval.vue"; //审批
import { onMounted } from "vue";

const { proxy } = getCurrentInstance();

let formInline = ref({
  auditState: "",
  pageNum: 1,
  pageSize: 10,
});
let dialogVisible = ref(false);
let auditStateList = ref([
  { name: "待审核", value: "01" },
  { name: "审核通过", value: "02" },
  { name: "审核驳回", value: "03" },
]);
let tableData = ref({});
let info = ref({});
let idList = ref([]);

onMounted(() => {
  search();
});

let handleClose = () => {
  dialogVisible.value = false;
};
let init = () => {
  formInline.value = {
    auditState: "",
    pageNum: 1,
    pageSize: 10,
  };
  getInfo();
};
let search = () => {
  formInline.value.pageNum = 1;
  getInfo();
};
let getInfo = async () => {
  let resp = await proxy.$apis.companyDiaryControllerPage(formInline.value);
  resp.records.forEach((element) => {
    element.imgs = diaryImg_format(element.diaryImg);
  });
  tableData.value = resp;
};
let auditState_format = (e) => {
  if (!e) return;
  let name;
  auditStateList.value.forEach((element) => {
    if (element.value == e) name = element.name;
  });
  return name;
};
let diaryImg_format = (e) => {
  let arr = [];
  e.forEach((element) => {
    arr.push(element.imgUrl);
  });
  return arr;
};
let seeDetail = (e) => {
  info.value = e;
  dialogVisible.value = true;
};
let handClick = (row) => {
  idList.value = [row.id];
  delFn();
};
let handleSelectionChange = (e) => {
  let ids = [];
  e.forEach((element) => {
    ids.push(element.id);
  });
  idList.value = [...ids];
};
let delFn = async () => {
  let resp = await proxy.$utils.confirmTips("是否确定删除?");
  if (!resp) return;
  for (let index = 0; index < idList.value.length; index++) {
    const element = idList.value[index];
    await proxy.$apis.companyDiaryControllerDel(element);
  }
  proxy.$utils.showToast("删除成功");
  getInfo();
};
</script>



<style lang="scss" scoped>
.container {
  padding: 20px;
}
</style>
